<template>
  <div class="page-box">
    <div class="page-search">
      <div>
        <label>颜色名称</label>
        <el-input v-model="searchForm.Name" style="width:160px;" placeholder="请输入颜色名称"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>

    <div class="page-section">
            <div class="page-tool">
                <el-button type="primary"  plain icon="el-icon-plus" @click="add" size="small">新增</el-button>
                <el-button type="danger"  plain icon="el-icon-delete" @click="dels" size="small">删除</el-button>
            </div>

            <!--表单-->
            <el-table :data="tableData"  ref="dataForm"   v-loading="isLoading"  height="calc(100vh - 350px)">
                <el-table-column  type="selection" width="55"></el-table-column>
                <el-table-column  fixed prop="Name" label="颜色" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column   label="操作" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <el-button type="text" @click="update(scope.row)">编辑</el-button>
                        <el-button type="text" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    

            <Pagination @handleSizeChange="handleSizeChange"  @handleCurrentChange="handleCurrentChange" :PageIndex="pageDomain.PageIndex" :PageSize="pageDomain.PageSize" :TotalCount="pageDomain.TotalCount"/>
        </div>
 
            <!--弹窗-->
            <el-dialog  :close-on-click-modal="false" :title="dialogDomain.title" :visible.sync="dialogDomain.dialogVisible" width="30%" @close="closeDialog">
           <ColorInput :model="model" :isUpdate="isUpdate" @callback="callback" v-if="dialogDomain.dialogVisible"/>
        </el-dialog>
  </div>
</template>

<script>
import ColorInput from "./components/ColorInput.vue";
import Pagination from '@/components/Pagination.vue';


export default {
  components: {
    ColorInput,
    Pagination
  },
  mounted(){
    this.dataBind();
  },
  data(){
    return{
      //搜索字段
      searchForm:{
        Name:'',
      },
      //对话框对象
      dialogDomain:{
        title:'新增颜色',
        dialogVisible:false
      },

      isUpdate:false,
      //数据模型
      model:{
        Name:'',
      },
      pageDomain:{
        PageIndex:1,
        PageSize:10,
        TotalCount:0
      },
        tableData:[],
        isLoading:false
    }
  },
  methods:{
    add(){
      this.dialogDomain.title="新增颜色";
      this.dialogDomain.dialogVisible=true;
      this.isUpdate=false;
    },
    update(model){
      this.dialogDomain.title="编辑颜色";
      this.dialogDomain.dialogVisible=true;
      this.isUpdate=true;

      console.log(model);
      this.model=model;
    },
    //分页方法
    handleSizeChange(val){
      this.pageDomain.PageIndex = 1;
      this.pageDomain.PageSize = val;
      this.dataBind();
    },
    handleCurrentChange(val){
      this.pageDomain.PageIndex = val;
      this.dataBind();
    },

    //批量删除
    dels(){
      if(this.$refs.dataForm.selection.length<=0)
      {
        this.showNotify('请先选择一项')
        return;
      }
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
     })
     .then(() => {
                
                //获取选中的表格数据 并筛选id
                var ids =this.$refs.dataForm.selection.map(x=>x.Id)

                //拼接参数
                let params =  new URLSearchParams();
                params.append('ids',ids.join(','))

                this.$http.delete('/api/Color/DelAll',{
                    data:params,
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    },
                    loading:this.$loading()
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});     
    },

    //单条删除
    del(model){
      this.$confirm('确定删除选中的数据吗？这将不可恢复, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                this.$http.delete('/api/Color',{
                    data:{
                        id:model.Id
                    },
                    headers:{
                        'content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then((res)=>{
                    this.showNotify('操作成功','success');
                    this.dataBind();
                })
            }).catch(()=>{});  
    },

    closeDialog(){
      this.model={
        Name:''
      }
    },

    search(){
            this.pageDomain.PageIndex=1;
            this.dataBind();
        },
        reset(){
            
            this.searchForm.Name='';
        },
    
    //新增或编辑
    callback(){
      let actionName = this.isUpdate?'编辑':'新增';
      this.showNotify(actionName+'颜色成功','success');
      this.dialogDomain.dialogVisible=false;
      this.dataBind();
    },
    //获取数据
    dataBind(){
      this.isLoading=true;
      this.$http.get('/api/Color',
      {
        params:{
          PageIndex:this.pageDomain.PageIndex,
          PageSize:this.pageDomain.PageSize,
          Name:this.searchForm.Name,
        }
      })
      .then(res=>{
        this.tableData=res.Data;
        this.pageDomain.TotalCount = res.Count;
        this.isLoading=false;
      })
    }
  }
}
</script>

<style scoped>

</style>